<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>单车私享</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">

	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<script src="jquery.min.js"></script>

	<!-- <link rel="stylesheet" href="./element/element.css"> -->
	<script type="text/javascript" src="vue.js"></script>
	<!-- <script type="text/javascript" src="./element/element.js"></script> -->
	<script type="text/javascript" src="request.js"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css" />
	<link rel="stylesheet" href="./bike/index.css" />
	<script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>
	<!-- import JavaScript -->
	<!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
	<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
	<script src="./bike/spritespin.js" type="text/javascript"></script>

	<style>

	</style>

</head>

<body>



	<div id="bike" class="content">

		<div class="spritespin"></div>


			<div class="introduction">
				<div>
					<div class="title">
						{{overview.title}}
					</div>
					<div class="description">
						{{overview.description}}
					</div>
				</div>

				<div v-for="(item, index) in advantages_list" class="item">
					<img :src="item.src" alt="">
					<div class="txt">
						<div class="title">
							{{item.title}}
						</div>
						<div class="description">
							{{item.description}}
						</div>
						<div class="feature" >

							<div v-for="(feature, index1) in item.feature_list" >
								{{feature.name}}
							</div>

							
						</div>

					</div>
				</div>				
			</div>

		<!-- <table class="table table-striped">

			<tbody>
				<tr>
					<th>Frame</th>
					<td>Mosso 920XC 29" Alu 7005</td>
				</tr>
				<tr>
					<th>Fork</th>
					<td>SUNTOUR EPIXON Air travel : 100mm 28.6*260mm Housing Magnesium</td>
				</tr>
				<tr>
					<th>Headset</th>
					<td>Mosso Super light MHP-2</td>
				</tr>
				<tr>
					<th>Rear Derailleur</th>
					<td>Shimano DEORE</td>
				</tr>
				<tr>
					<th>Front Derailleur</th>
					<td>Shimano DEORE</td>
				</tr>
				<tr>
					<th>Shifter</th>
					<td>Shimano DEORE</td>
				</tr>
				<tr>
					<th>Brake Levers</th>
					<td>Shimano M355 </td>
				</tr>
				<tr>
					<th>Brake</th>
					<td>Shimano M355 </td>
				</tr>
				<tr>
					<th>Crankset</th>
					<td>Shimano DEORE 24*38T</td>
				</tr>
				<tr>
					<th>Cassette</th>
					<td>Shimano CS-HG50 11-36T </td>
				</tr>
				<tr>
					<th>Handlebar</th>
					<td>EASTON EA70 XC HB 9D 31.8m *720mm </td>
				</tr>
				<tr>
					<th>Seat post</th>
					<td>EASTON EA70 SP 350mm*31.6mm 2B </td>
				</tr>
				<tr>
					<th>Stem</th>
					<td>EASTON EA50 STM 8D 31.8mm 90/100/115mm </td>
				</tr>
				<tr>
					<th>Saddle</th>
					<td>VELO VL-1489</td>
				</tr>
				<tr>
					<th>Wheels</th>
					<td>Mosso 29*14G*36H，A/V</td>
				</tr>
				<tr>
					<th>Tires</th>
					<td>KENDA K1027 29"*1.95, A/V</td>
				</tr>
			</tbody>
		</table>
		<div class="price">
			标准版 ¥<span class="num">{{price}}</span>

		</div> -->


		<div class="order" @click="start_order">
			订制该车
		</div>



		<!-- <div class="config-detail">
			<div v-for="(item, index) in config_detail_list" class="item">
				<div class="name">{{item.name}}</div>
				<div class="price">{{item.price}}</div>

			</div>
			<div class="total">
				<div class="name">总价</div>
				<div class="price">{{total}}</div>
			</div>
		</div> -->
	

		<!-- <el-drawer title="配件列表" :visible.sync="drawer" size="50%">
			<div>

				<div v-for="(item, index) in parts_list" class="item">

					<template>
						<el-carousel type="card" height="200px">
							<el-carousel-item v-for="detail in item.detail" :key="item">

								<img src="" alt="">
							</el-carousel-item>
						</el-carousel>
					</template>



				</div>


				<el-drawer title="我是里面的" :append-to-body="true" :before-close="handleClose" :visible.sync="innerDrawer">
					<p>_(:зゝ∠)_</p>
				</el-drawer>
			</div>
		</el-drawer> -->



	</div>


</body>


</html>
<script>


	bike = new Vue({
		el: "#bike",
		data() {
			return {
				index_list: [{
					title: '今日开工',
					value: 20,
				}, {
					title: '今日在建',
					value: 15,
				}, {
					title: '今日完工',
					value: 5,
				}, {
					title: '待开工',
					value: 5,
				}, {
					title: '待验收',
					value: 2,
				}, {
					title: '停工',
					value: 1,
				}],
				project_list: [{
					title: '海德公园',
					status: '视频监控中'
				}, {
					title: '海尚壹品',
					status: '信号中断'
				}, {
					title: '中海国际',
					status: '正在重连中'
				}, {
					title: '金色万科',
					status: '视频监控中'
				}],
				manager_list: [{
					name: '张三',
					num: 2,
				}, {
					name: '李四',
					num: 4,
				}, {
					name: '王五',
					num: 1,
				}, {
					name: '赵四',
					num: 3,
				}],
				housekeeper_list: [{
					name: '雷军',
					num: 7,
				}, {
					name: '马云',
					num: 1,
				}, {
					name: '张一鸣',
					num: 5,
				}, {
					name: '马化腾',
					num: 3,
				}],
				video_list: [{
					title: '海德公园',

				}, {
					title: '金色万科',
				}],


				config_detail_list: [{
					name: '车架套装',
					value: '',
					price: '300',
				}, {
					name: '轮毂',
					value: '',
					price: '400',
				}, {
					name: '牙盘',
					value: '',
					price: '400',
				}, {
					name: '变速套装',
					value: '',
					price: '400',
				}, {
					name: '刹车',
					value: '',
					price: '300',
				}, {
					name: '坐垫',
					value: '',
					price: '300',
				}, {
					name: '脚踏',
					value: '',
					price: '300',
				}],
				total: '333',
				drawer: false,
				innerDrawer: false,
				parts_list: [],
				price:2499,

				overview:{
					title:'',
					description:'',
				},
				advantages_list:[{
					src:'/bike/detail/1.jpg',
					title:'',
					description:'',
					feature_list:[{
						name:''
					}],
				}],

				//cur_time:(new Date()).toLocaleString()
			};
		},

		computed: {
			cur_time() {
				var d = new Date();
				return (d.getMonth() + 1) + '月' + d.getDate() + '日  ' + d.getHours() + ':' + d.getMinutes();
			}
		},
		mounted: function () {
			this.init();
			this.$nextTick(function () {
				$('.spritespin').spritespin({
					source: [
						'/bike/rad_zoom_001.jpg',
						'/bike/rad_zoom_005.jpg',
						'/bike/rad_zoom_010.jpg',
						'/bike/rad_zoom_015.jpg',
						'/bike/rad_zoom_020.jpg',
						'/bike/rad_zoom_025.jpg',
						'/bike/rad_zoom_030.jpg',
						'/bike/rad_zoom_034.jpg',
					],
					width: 300,
					height: 227,
					// reverse interaction direction
					sense: -1,
					animate: false,
					responsive: true
				});
			})
		},

		methods: {
			init() { },
			start_order() {
				location.href='bike_config.html';
			},
			handleClose(done) {
				this.$confirm('还有未保存的工作哦确定关闭吗？')
					.then(_ => {
						done();
					})
					.catch(_ => { });
			},

			toggel_section(item) {
				this.cur_section = item.name;
				this.setting_list = this.setting_data[item.name];

				this.$nextTick(function () {

				})

			},
			add_code(item) {
				this.code += $.trim($("#" + item.id).html().replace(/\#/, this.handler_value_name)) + "\n";

				this.$nextTick(function () {

				})

			},
			toggel_hot_use(item) {
				debugger;

				this.hot_use_list = item.hot.split(",");

			},
			assign_value(item) {
				this.handler_value_name = item;


			},
		}
	});



</script>